<template>
  <div>
    <div>LineEchart</div>
    <div class="mapContainer" id="mapContainer" ref="mapContainerRef"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import "echarts-gl";
import "echarts-liquidfill";
import { onMounted, ref } from "vue";
import useEchartMapOption from "./use-echart-map-option";

const mapContainerRef = ref(null);
let myChart;
const mapName: string = "guangzhou";

const getMapData = async (mapName: string) => {
  const response = await fetch(`./public/data/${mapName}.geojson`); // 请将'china.json'替换为实际的地图数据文件路径
  return await response.json();
};

const init = async () => {
  myChart = echarts.init(mapContainerRef.value);
  const { getOption } = useEchartMapOption(mapName);
  const option = getOption();
  const chinaGeoJson = await getMapData(mapName);
  echarts.registerMap(mapName, chinaGeoJson); // 注册可用地图，名称需要一致
  console.log("option",option);
  
  myChart.setOption(option);
};

onMounted(() => {
  init();
});
</script>

<style scoped>
.mapContainer {
  width: 1200px;
  height: 800px;
  border: 0.0625rem solid #000;
}
</style>
